<!--表格tr-->
<template>
  <div class="gante-tr-box">
    <!--为了设置母子显示线 gante-cell_after  gante-cell_after_first gante-cell_after_last-->
    <div class="gante-tr-one" :key="index" v-for="(tr, index) in data">
      <!--普通表格-->
      <div class="gante-tr" :class="{ gj_hover_class: tr.is_hover }" @mouseenter="enterTr($event, tr)" @mouseleave="leaveTr($event, tr)">
        <div class="gante-td" v-show="th.show != false" v-for="(th, key) in th_data" :style="{ textAlign: th.value == '编号' ? 'center' : 'null' }">
          <td-cell :td_data="tr" :index="index" :key_value="key" :th="th" :isTime="th.isTime"></td-cell>
        </div>
      </div>
      <gante-tr v-if="tr.children && tr.open" :parent_data="tr" :all_data="all_data" :data="tr.children" :th_data="th_data"></gante-tr>
    </div>
  </div>
</template>
<script>
import tdCell from './gante-table-td.vue';

export default {
  name: 'gante-tr',
  props: {
    all_data: Array,
    data: Array,
    th_data: Object,
    // 父级数据
    parent_data: {
      type: Object,
      default: null,
    },
  },
  components: {
    tdCell,
  },
  methods: {
    opens(data) {
      this.$set(data, 'open', !data.open);
    },
    // 进入到了tr上
    enterTr(ev, tr) {
      this.$set(tr, 'is_hover', true);
    },
    // 离开了tr
    leaveTr(ev, tr) {
      this.$set(tr, 'is_hover', false);
    },
  },
};
</script>
<style lang="scss" scoped>
.gante-tr-box {
  width: max-content;

  .add_task,
  .seeMore {
    color: #3396fb;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ebeef5;

    &:hover {
      opacity: 0.8;
    }
  }
}

.gante-tr-one {
  .gante-tr.gj_hover_class {
    background: rgba(246, 246, 246, 0.7);
  }

  .gante-group-text {
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    line-height: 40px;
    padding: 0 10px;
    color: #333;
    width: 100%;
    font-weight: bold;
    .trigger {
      position: absolute;
      left: 5px;
      width: 10px;
      cursor: pointer;
      .open-icon {
        font-size: 12px;
        color: #bfbfbf;
        cursor: pointer;
      }
      &:hover .open-icon {
        color: #999;
      }
    }
  }

  &.gante-cell_after {
    position: relative;

    &:after {
      position: absolute;
      content: '';
      top: 25px;
      left: calc(8px + var(--leftAfter));
      border-left: 1px dashed #0fb7a6;
      height: calc(100% - 45px);
    }

    .gante-tr {
      position: relative;

      &:after {
        position: absolute;
        content: '';
        top: 20px;
        left: calc(var(--leftAfter) - 10px);
        border-top: 1px dashed #0fb7a6;
        width: 15px;
        height: 1px;
      }

      &.gante_tr_only:after {
        left: 40px;
        width: calc(var(--leftAfter) - 36px);
      }
    }
  }

  &.gante-cell_after_last {
    position: relative;

    &:before {
      position: absolute;
      content: '';
      top: 20px;
      left: calc(-10px + var(--leftAfter));
      border-left: 1px solid #fff;
      height: calc(100% - 40px);
      z-index: 1;
    }
  }

  &.gante-cell_after_first > .gante-tr:after {
    display: none;
  }
}
</style>
